<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的购物车</title>
<link href="/lib/css/business.css" type="text/css" rel="stylesheet"/> 
<script type="text/javascript" src="/lib/jquery/jquery-1.3.2.min.js"></script>
<style type="text/css">
form{
	background-image: url('/lib/images/business/footer.png');
	width: 800px;
	height: 300px;
	margin-bottom: 10px;
}
input{
	height: 20px;
	margin-top: 5px;
}
form span{
	color: red;
}
</style>
</head>
<body>
<div class="bgbox">
	<div id="header" class="header"  >
		<a href="/" class="left"><span>首页</span></a>
	</div>
	<div class="main">
		<div class="separate"><span style="color:black;">用户注册</span></div>
		<form action="/register" method="post">
			<table>
				<tr>
					<td>用户名：</td>
					<td><input type="text" value="" id="name" name="name" /></td>
					<td><span id="nameInfo"></span></td>
				</tr>
				<tr>
					<td>密码：</td>
					<td><input type="text" value="" id="password" name="password" /></td>
					<td><span id="passwordInfo"></span></td>
				</tr>
				<tr>
					<td>地址：</td>
					<td><input type="text" value="" id="address" name="address" /></td>
					<td><span id="addressInfo"></span></td>
				</tr>
				<tr>
					<td>电话：</td>
					<td><input type="text" value="" id="phone" name="phone" /></td>
					<td><span id="phoneInfo"></span></td>
				</tr>
				<tr>
					<td>性别：</td>
					<td>
						<select id="gender" name="gender">
							<option value="w">女</option>
							<option value="m">男</option>
						</select>
					</td>
					<td><span id="genderInfo"></span></td>
				</tr>
				<tr>
					<td>身份证：</td>
					<td><input type="text" value="" style="width: 300px;" name="identity" /></td>
					<td><span></span></td>
				</tr>
				<tr>
					<td>QQ:</td>
					<td><input type="text" value="" name="qq" /></td>
					<td><span></span></td>
				</tr>
				<tr>
					<td>邮箱：</td>
					<td><input type="text" value="" name="mail" /></td>
					<td><span></span></td>
				</tr>
				<tr>
					<td></td>
					<td>
						<input type="reset" style="height: 30px;width: 50px;" value="重写" />
						<input type="button" style="height: 30px;width: 50px;" value="注册"  onclick="return checkForm();" />
					</td>
					<td><span id="reginstInfo"></span></td>
				</tr>
			</table>
		</form>	
	</div>
	<div id="footer" class="footer">
		<table>
			<tr>
				<td><span class="right">咨询电话：</span></td>
				<td><a href="#" class="left">123456</a></td>
				<td><span class="">送餐电话：</span></td>
				<td><a href="#">123456</a></td>
			</tr>
		</table>
	</div>
</div>
</body>
<script type="text/javascript" src="/lib/js/business.js"></script>
<script type="text/javascript">
function checkForm(){
	var arr = ['name','password','address','phone','gender'];
	for(var i=0; i<arr.length; i++){
		if(!checkElement(arr[i])){
			return false;
		}
	}
	$.ajax({
		url: '/checkAccountName',
		data: {accountName: $('#name').val()},
		dataType: 'json',
		success: function(data){
			if(data){
				$('#reginstInfo').html('注册中...');
				setTimeout("javascript:document.forms[0].submit();", 1000);
				return true;
			}else{
				alert("用户名已被占用，请使用其他用户名进行注册");
				return false;
			}
		}
	});
}
function checkElement(e){
	if($('#' + e).val() == ''){
		$('#' + e + 'Info').html('*必填').fadeIn("slow");
		return false;
	}else{
		$('#' + e + 'Info').html('').fadeOut("slow");
		return true;
	}
}
</script>
</html>